import React, { Component } from "react";
import { connect } from "dva";
import { Button, Input, Table, Divider, Popconfirm, Tooltip } from "antd";
import PushAppAdd from "./PushAppAdd";
import styles from "./PushApp.less";

const { Search } = Input;

@connect(stores => ({
  pushAppData: stores.pushApp,
  appTypeMap: new Map(
    stores.pushApp.appTypeList.map(({ id, appType }) => Array.of(id, appType))
  )
}))
class PushApp extends Component {
  componentDidMount() {
    this.getAppList();
    this.getAppType();
  }

  getAppList = params => {
    const { dispatch } = this.props;
    dispatch({
      type: "pushApp/pushAppConfigQuery",
      payload: params
    });
  };

  getAppType = () => {
    const { dispatch } = this.props;
    dispatch({ type: "pushApp/getAppType" });
  };

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: "pushApp/clearState" });
  }

  onModalVisibleChange(type, record = {}) {
    const { dispatch } = this.props;
    dispatch({
      type: "pushApp/setState",
      payload: { showModal: type, currentData: record }
    });
  }

  handleTableChange = (pagination = {}, filters = {}) => {
    const { current, pageSize } = pagination;
    const { appType = [] } = filters;
    this.getAppList({ pageIndex: current, pageSize, appType: appType[0] });
  };

  render() {
    const {
      pushAppData: {
        pushAppList = [],
        totalCount,
        totalPage,
        showModal,
        currentData,
        filter = {}
      },
      dispatch
    } = this.props;
    const columns = [
      {
        title: "序号",
        dataIndex: "appId",
        key: "appId",
        width: "70px",
        render: (text, recode, index) => {
          const { filter: Filter } = this.props.pushAppData;
          const currenPage = Number(Filter.pageIndex);
          const PageSize = Number(Filter.pageSize);
          return Number(index) + 1 + (currenPage - 1) * PageSize;
        }
      },
      {
        title: "应用名称",
        dataIndex: "appName",
        key: "appName",
        width: "16%",
        render: text =>
          text.length > 15 ? (
            <Tooltip placement="top" title={text} arrowPointAtCenter>
              <span>{`${text.substring(0, 15)}……`}</span>
            </Tooltip>
          ) : (
            text
          )
      },
      {
        title: "应用类型",
        dataIndex: "appType",
        key: "appType",
        width: "15%",
        filters: (this.props.pushAppData.appTypeList || []).map(
          ({ id, appType }) => ({ text: appType, value: id })
        ),
        filterMultiple: false,
        render: text => this.props.appTypeMap.get(text)
      },
      {
        title: "接入说明",
        dataIndex: "appDesc",
        key: "appDesc",
        render: (text = "") =>
          text.length > 15 ? (
            <Tooltip placement="top" title={text} arrowPointAtCenter>
              <span>{`${text.substring(0, 15)}……`}</span>
            </Tooltip>
          ) : (
            text
          )
      },
      {
        title: "接入时间",
        dataIndex: "createTime",
        key: "createTime",
        width: "160px"
      },
      {
        title: "创建人",
        dataIndex: "creator",
        key: "creator",
        width: "10%"
      },
      {
        title: "操作",
        dataIndex: "setId",
        key: "setId",
        width: "150px",
        render: (txt, record) => (
          <React.Fragment>
            <a
              onClick={() => {
                this.onModalVisibleChange(true, record);
                this.props.dispatch({
                  type: "pushApp/pushAppConfigById",
                  payload: record.appId
                });
              }}
            >
              编辑
            </a>
            <Divider type="vertical" />
            <Popconfirm
              placement="top"
              title={"确定删除?"}
              onConfirm={() => {
                this.props.dispatch({
                  type: "pushApp/delPushApp",
                  payload: record.appId
                });
              }}
            >
              <a role="button">删除</a>
            </Popconfirm>
          </React.Fragment>
        )
      }
    ];
    return (
      <div>
        {showModal ? (
          <PushAppAdd
            dispatch={dispatch}
            dataSource={currentData}
            closeModal={() => {
              this.onModalVisibleChange(false);
            }}
          />
        ) : (
          <div className={styles.root}>
            <div className={styles.title}>
              <span className={styles.titleLeft}>应用接入管理</span>
              <div className={styles.titleRight}>
                <Button
                  type="primary"
                  onClick={() => {
                    this.onModalVisibleChange(true);
                  }}
                >
                  新增应用
                </Button>
                <Search
                  placeholder="搜索"
                  onSearch={appName => {
                    this.getAppList({ appName, pageIndex: 1 });
                  }}
                  style={{ width: 272, marginLeft: 15 }}
                />
              </div>
            </div>
            <Table
              columns={columns}
              dataSource={pushAppList}
              rowKey={"appId"}
              onChange={this.handleTableChange}
              pagination={{
                total: totalCount,
                pageSize: filter.pageSize,
                current: filter.pageIndex,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: total =>
                  `共 ${total} 条记录 第 ${filter.pageIndex}/ ${totalPage}页`
                // onChange: (page, pageSize) => {
                //   this.getAppList({ pageIndex: page, pageSize });
                // },
                // onShowSizeChange: (current, size) => {
                //   this.getAppList({ pageIndex: current, pageSize: size });
                // }
              }}
            />
          </div>
        )}
      </div>
    );
  }
}

export default PushApp;
